<template>
    <div class="news-item" :class="props.size" @click="toNews">
        <div class="img">
            <img v-lazy="data.contestProfileSmallPath" alt="">
        </div>
        <div class="content">
            <div class="title">{{ data.title }}</div>
            <div class="text">
                {{ textContent }}
            </div>
            <div class="bottom">
                <span class="author">{{ data.nickName }}</span>
                <span class="time">{{ data.createTime }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    size: {
        type: String,
        default: ''
    }
})

const router = useRouter()
const toNews = () => {
    localStorage.setItem('newsData', JSON.stringify(props.data))
    router.push('/news-detail')
}

const textContent = ref('')
onMounted(() => {
    textContent.value = handleHtmlToText(props.data.content)
})
// 将html转换为text
const handleHtmlToText = (html) => {
    const div = document.createElement('div')
    div.innerHTML = html
    return div.innerText
}
</script>
<style scoped lang="scss">
.news-item {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-2);
    overflow: hidden;

    .img {
        width: 200px;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            // border-radius: 10px;
        }
    }

    .content {
        width: calc(100% - 200px);
        height: 100%;
        padding: 5px 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            font-size: 20px;
            margin: 5px 0;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

       

        .text {
            font-size: 14px;
            color: #9c9c9c;
            overflow: hidden;
            text-overflow: ellipsis;
            // 两行后省略
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            // 缩进两格
            text-indent: 2em;
        }

        .bottom {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #2c3e50;

            .author {
                font-size: 16px;

            }
            .time {
                font-size: 14px;
                color: #9c9c9c;
            }
        }
    }
}

.news-item:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-1);
    transform: scale(1.01);

}

.small {
    height: 120px;

    .content {
        .title {
            font-size: 18px;
        }

        .text {
            font-size: 14px;
        }

        .bottom {
            .author {
                font-size: 14px;
            }

            .time {
                font-size: 14px;
            }
        }
    }
}
</style>